<template>
	<view @click="isChangeMoneySymbol.open()">
		<slot></slot>
	</view>
	<myPopupVue ref="isChangeMoneySymbol">
		<view class="changeMoneySymbol">
			<view class="changeMoneySymbol_one changeMoneySymbol_top">
				<view class="changeMoneySymbol_one_name">
					{{TheUseing.name}}
				</view>
				<view class="changeMoneySymbol_one_icon">
					{{TheUseing.icon}}
				</view>
			</view>
			<scroll-view scroll-y class="changeMoneySymbol_main" >
				<view class="changeMoneySymbol_list">
					<view class="changeMoneySymbol_one" @click="chooseMoneySymbol(item)" v-for="item in showMoneySymbolList" :key="item">
						<view class="changeMoneySymbol_one_name">
							{{item.name}}
						</view>
						<view class="changeMoneySymbol_one_icon">
							{{item.icon}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</myPopupVue>
</template>

<script setup>
	import myPopupVue from '@/components/base/myPopup.vue';
	import {
		ref,
	} from "vue"
	import store from "@/store/index.js";
	const isChangeMoneySymbol = ref()
	const moneySymbolAll = [{
			name: "人民币",
			icon: "￥"
		},
		{
			name: "美元",
			icon: "$"
		},
		{
			name: "欧元",
			icon: "€"
		},
		{
			name: "英镑",
			icon: "￡"
		},
		{
			name: "法朗",
			icon: "₣"
		},
		{
			name: "卢布",
			icon: "₽"
		},
		{
			name: "日元",
			icon: "Ұ"
		},
		{
			name: "通用符",
			icon: "¤"
		},
	]
	const TheUseing = ref()
	const showMoneySymbolList = ref()
	const getSymbol = () => {
		let userSymbol =store.state.setting.MoneySymbol
		const currentSymbol = moneySymbolAll.find(item => item.icon === userSymbol) || moneySymbolAll[0];
		TheUseing.value = currentSymbol;
		showMoneySymbolList.value = moneySymbolAll.filter(item => item.icon !== userSymbol);
	}
	getSymbol()
	const chooseMoneySymbol=(x)=>{
		if(x){
			store.commit("setting/changeMoneySymbol",x.icon)
			isChangeMoneySymbol.value.close()
			getSymbol()
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.changeMoneySymbol {
		width:$bigPopupWidth;
		overflow: hidden;
		.changeMoneySymbol_one {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: $bigFontsize;
			line-height: 1.7em;

			&_name {
				padding-left: 1em;
				text-align: center;
			}

			&_icon {
				width: 20%;
				text-align: center;
			}

			&:active {
				color: $baseBlack_mid;
				background: $baseWhite_click;
			}
		}

		.changeMoneySymbol_top {
			line-height: 2em;
			font-weight: bold;
			color: $baseBlack_mid;
			background: $baseWhite_click;
		}

		.changeMoneySymbol_main {
			max-height: 25vh;

			.changeMoneySymbol_list {
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>